このページは私用WordPressの覚え書き兼、テストページです。
「SNSボタン」は、テスト検証用に仮設置しているだけなので、押しても反応しません。

023 オリジナルテーマでウィジェットを使いたい

(※WordPress覚書メモ この記事は、過去に書いた記事の再アップです)


wordpressには「ウィジェット」という、サイドバーを簡単に編集できる機能があります。
でもいちから作った「自作テーマ」の場合、「ウィジェット」を使えるようになっていません。
今日は、「オリジナルテーマ」で「ウィジェット」を使う方法について書きたいと思います。


「オリジナルテーマ」で「ウィジェット」を使うには、functions.php に下記を記入する

<?php
//サイドバーのウェジェットを使えるようにする
register_sidebar(array(
‘before_widget’ => ‘<div id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));
?>
279行目はコメントです。


コメントの書き方の違い

コメント」は、ファイルによって書き方が異なります。
htmlファイルなら <!-- --> で囲み、
<?php ?> の中なら、頭に // とつけるとその行のみコメント、
cssファイルなら /* */ で囲む、という具合です。


「ウィジェット」を出力する

次に、sidebar.php を開いて、「ウィジェット」を表示させたい箇所に、下記を挿入します。

<!--サイドバー(ウィジェット)-->
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>


これで「ウィジェット」が使えるようになりました。


017「...続きを読む」「抜粋の文字数を制限する」

wordpressには、「本文記事」の他に、「抜粋」という機能があります。


「抜粋」とは

何かというと、目次一覧などを作った時に、記事の一部の文章を表示して、以下 [...続きを読む] のような場合に表示することが出来る文字列の機能です。


「抜粋」を使えるようにするには?

管理画面右上部の 表示オプション → 抜粋 にチェックを入れると、「抜粋」を入力する枠があらわれます。
ここに「記事の概略」や「あらすじ」、あるいは、目立たせたい「アピールポイント」などを入れると、=「抜粋」となります。


google検索結果では「抜粋」の内容が有効?

googleで検索した時に検索結果に短い文章がつく際に、"「抜粋」に入れた文字が優先的に表示されるので、「抜粋」を有効に使う事は意味がある" というような話を昔、聞いたことがあります。
ただ googleの仕様は、随時変化していくと思いますので、何とも言えませんが。


「抜粋」を出力させるには?

入力した「抜粋」を出力させるには、任意のテンプレートファイルに下記を記述します。
4行目
excerpt=抜粋です)

<div class="post">
<h2><a href="<?php the_permalink(); ?>" title="「<?php the_title(); ?>」へ"></h2>
<?php the_post_thumbnail( array(100,100) ); ?></a><br />
<?php the_excerpt(); //抜粋?>
</div>


「抜粋」を毎回入力するのがメンドウな時は?

でも毎日ブログを書くのに、本文以外に、いちいち「抜粋」にも入力、っていうのも、案外面倒ですよね。
抜粋に何も入力しなかった場合どうなるのか というと、
excerptの出力結果=自動的に、本文記事が使われます。


「抜粋」の文字数っていくつ?

この「抜粋」の文字数が何文字かというと、デフォ設定で、確か110文字(?)(だったかな?)のようで、
ちょっと長い・・・ もうちょっと短いのがいいかも・・・ って方も多いかと思います。


抜粋の文字数をカスタマイズ(もっと短くしよう)

文字数をに変更するには、functions.php に、下記を記述します。

<?php
//抜粋の文字数を30文字にする
function new_excerpt_mblength($length) {
     return 30;
}
add_filter('excerpt_mblength', 'new_excerpt_mblength');
?>
  ↑
4行目の数字が文字数です。(上記例では30文字としました)


抜粋に ...続きを読む と入れる

それから、「抜粋」のデフォルト表現なんですが、抜粋文字の末尾に [...] とつくだけなので、少々不親切かな・・・と思う場合は、変えることもできます。
もうちょっとわかりやすく、 [...続きを読む] のように変えたいと思います。


↓ functions.php に、下記を追記します。

<?php
//抜粋に...続きを読むと入れる
function new_excerpt_more($post) {
    return '<a href="'. get_permalink($post->ID) . '">' . '...続きを読む' . '</a>';   
}   
add_filter('excerpt_more', 'new_excerpt_more');
?>

これで完了です。


014_2カスタム投稿の「カテゴリー」と「タグ」を表示するようにする

「カスタム投稿」を作るにプラス、覚書メモ


「通常投稿」には、「カテゴリー」と「タグ」の仕様が標準についてますが、
自作で「カスタム投稿」を作った場合は、自分で定義を追加しないと「カテゴリー」も「タグ」も使えるようにはなっていないです。

いちいち設定しないと「存在しない」というのはなにかと不便ですが、これも wordpress の仕組みを理解する上でも大事なことかな、と思って設定したいと思います。


「カテゴリー」「タグ」も、実は「タクソノミー」

調べてみると、
どうやら「カテゴリー」と「タグ」は、両方とも同じ「タクソノミー(訳すと=分類)」という言葉で定義するようです。

設定では 'hierarchical' という部分を true にするか、false にするか、の違いだけのようです。

trueだと=カテゴリー になり、
false だと=タグ になります。


「カスタム投稿」に「カテゴリー」と「タグ」を設定する

functions.php に下記を追記します

もちろん、「カスタム投稿」を複数作った場合は、それぞれに設定が必要です。
下記↓はひとつ分です。(一例として「イラスト」のカスタム投稿)

    //カテゴリータイプ
    $args = array(
        'label' => 'カテゴリー',
        'public' => true,
        'show_ui' => true,
        'hierarchical' => true
    );
    register_taxonomy('illust_category','illust',$args);
     //タグタイプ
    $args = array(
        'label' => 'タグ',
        'public' => true,
        'show_ui' => true,
        'hierarchical' => false
    );
    register_taxonomy('illust_tag','illust',$args);


実際に追記したのが下記です。(functions.php に追記する)

(26行目~41行目)
   ↓

<?php
//カスタム投稿生成
add_action('init', 'my_custom_post_type'); //WordPressの読み込みが完了し、ヘッダーが送信される前にmy_custom_post_typeをフック
function my_custom_post_type() {

    $labels = array(
        'name' => 'イラスト', //投稿タイプの一般名
        'add_new_item' => '新規イラストを追加',
        'not_found' =>  __('イラストは見つかりませんでした'), //投稿がない場合の管理画面のカスタム投稿タイプ一覧に表示されるテキスト
        'new_item' => __('新しいイラスト'), //編集画面のタイトル
        'view_item' => __('イラストを表示') //記事編集画面の「プレビュー」のテキスト
    );
    $args = array(
        'labels' => $labels, //この投稿タイプのラベルの配列
        'public' => true, //publicly_queriable, show_ui, show_in_nav_menus, exclude_from_searchのデフォルト値を定義するメタ引数
        'publicly_queryable' => true, //フロントエンドで post_type クエリが実行可能かどうか
        'show_ui' => true, //この投稿タイプを管理するデフォルト UI を生成するかどうか
        'exclude_from_search' => false, //この投稿タイプを検索結果から除外するかどうか
        'capability_type' => 'post', //投稿タイプの閲覧/編集/削除権限をチェックするのに使用。初期値: "post"
        'rewrite' => true, //このフォーマットでパーマリンクをリライトする
        'hierarchical' => false, //この投稿タイプが階層(親の指定が許可されている)かどうか
        'menu_position' => 5, //投稿タイプが表示される管理画面のメニューの位置
        'supports' => array('title','editor','thumbnail', 'excerpt','comments','trackbacks') //add_post_type_support()を直接呼び出すエイリアス
    );
    register_post_type('illust',$args); //カスタム投稿タイプとその動作を定義する設定名(single.phpに追加する名前でもある)
    //カテゴリータイプ
    $args = array(
        'label' => 'カテゴリー',
        'public' => true,
        'show_ui' => true,
        'hierarchical' => true
    );
    register_taxonomy('illust_category','illust',$args);
     //タグタイプ
    $args = array(
        'label' => 'タグ',
        'public' => true,
        'show_ui' => true,
        'hierarchical' => false
    );
    register_taxonomy('illust_tag','illust',$args);




    $labels = array(
        'name' => 'comic', //投稿タイプの一般名

//以下略

}
?>

作った「カスタム投稿」の数分だけ追記します。


パーマリンクを空更新

カスタム投稿を作った時と同じく
functions.php に追記して保存した後、メニュー → 設定 → パーマリンクを、空更新しておきました。


記事を投稿してみる

これで、管理画面上で、「カスタム投稿」の「カテゴリー(と表示名をつけたタクソノミー)」と、同じく「タグ(と表示名をつけたタクソノミー)」ができました。
さっそく記事を投稿して、試しにタグを入力してみたいと思います。

入力したものの、プレビューしても出てこない

しかし、タグを入力後、プレビューしてみても、タグが表示されません・・・

これは、テンプレート(single-xxx.php)の中に、「タクソノミーを表示する」というコードを、まだ書いてないからです。


「カスタム投稿」の「カテゴリー」と「タグ」を出力させるには

いろいろぐぐって、試してみた結果、
下記のように書けば、「カテゴリー(タクソノミー)」と「タグ(同じくタクソノミー)」の文字が表示できるようになりました。

1~6行目が「カテゴリー」、7~12行目が「タグ」)
    ↓

<?php
$taxolist = get_the_term_list( $post->ID, 'illust_category', 'カテゴリー:', '、', '' );
if($taxolist):
?>
<dd><?php echo $taxolist; ?></dd>
<?php endif; ?>
<?php
$taxolist2 = get_the_term_list( $post->ID, 'illust_tag', 'タグ:', '、','' );
if($taxolist2):
?>
<dd><?php echo $taxolist2; ?></dd>
<?php endif; ?>


「出力結果」は、

  ↓

カテゴリー:食べ歩き タグ:ラーメン味噌市ヶ谷
のようになります。
(見た目のデザインは、スタイル定義によって変わります)


上記のコードは、出力したい部分例えば:single-llust.phparchive-illust.php など)に記述します。


014_1カスタム投稿を作る

「カスタム投稿」を作る覚書メモ


「カスタム投稿」とは

「カスタム投稿」とは、「通常投稿」とは別の新たな投稿枠の事です。

自作テーマを作るにあたって、最初は、それぞれのコンテンツ(「小説」「イラスト」「漫画」など)を、カテゴリーで分けるくらいしか考えてなかったのですが、

WordPress には「通常の投稿」、「更新しない固定ページ」の他に、もうひとつ「カスタム投稿」というのを作ることが出来るという事を知りました。

「カスタム投稿」を作ると、「通常の投稿」の他に、新たにメニュー項目に追加され、「通常の投稿」と完全に分離できます。


「カスタム投稿」を新規設定するには

デフォルトの WoredPress では「カスタム投稿」は、すぐに作れるようにはなっていません。
カスタム投稿」を作るには、「手動で functions.php というのを作ってコードを書いて設定する方法」と「プラグインを入れて設定する方法」の二種類の方法があるようです。

作業的には、おそらく「プラグイン」を使った方が楽だろうと思うのですが、それだと覚えられない、というか、WoredPress の仕組みを学ぶためには、プラグインではなく「手動でfunctions.php にコードを書く方法」方法をとりたいと思います。


functions.php に下記を追記する

6~25行目ひとつぶんです)
7~11行目の ' ' のところを自分の作りたい投稿名に書き換えます)
25行目の ' ' のところは欧文にします。大文字はダメみたいです)
23行目の 'supports' の array(' ') のところは、必要なものを入れます。

(詳しくは → ●WordPress日本語Codex「関数リファレンス」)を見てください。

<?php
//カスタム投稿生成
add_action('init', 'my_custom_post_type'); //WordPressの読み込みが完了し、ヘッダーが送信される前にmy_custom_post_typeをフック
function my_custom_post_type() {

    $labels = array(
        'name' => 'イラスト', //投稿タイプの一般名
        'add_new_item' => '新規イラストを追加',
        'not_found' =>  __('イラストは見つかりませんでした'), //投稿がない場合の管理画面のカスタム投稿タイプ一覧に表示されるテキスト
        'new_item' => __('新しいイラスト'), //編集画面のタイトル
        'view_item' => __('イラストを表示') //記事編集画面の「プレビュー」のテキスト
    );
    $args = array(
        'labels' => $labels, //この投稿タイプのラベルの配列
        'public' => true, //publicly_queriable, show_ui, show_in_nav_menus, exclude_from_searchのデフォルト値を定義するメタ引数
        'publicly_queryable' => true, //フロントエンドで post_type クエリが実行可能かどうか
        'show_ui' => true, //この投稿タイプを管理するデフォルト UI を生成するかどうか
        'exclude_from_search' => false, //この投稿タイプを検索結果から除外するかどうか
        'capability_type' => 'post', //投稿タイプの閲覧/編集/削除権限をチェックするのに使用。初期値: "post"
        'rewrite' => true, //このフォーマットでパーマリンクをリライトする
        'hierarchical' => false, //この投稿タイプが階層(親の指定が許可されている)かどうか
        'menu_position' => 5, //投稿タイプが表示される管理画面のメニューの位置
        'supports' => array('title','editor','thumbnail', 'excerpt','comments','trackbacks') //add_post_type_support()を直接呼び出すエイリアス
    );
    register_post_type('illust',$args); //カスタム投稿タイプとその動作を定義(single.phpに追加する名前)



    $labels = array(
        'name' => 'comic', //投稿タイプの一般名
        'add_new_item' => '新規comicを追加',
        'not_found' =>  __('comicは見つかりませんでした'), //投稿がない場合の管理画面のカスタム投稿タイプ一覧に表示されるテキスト
        'new_item' => __('新しいcomic'), //編集画面のタイトル
        'view_item' => __('comicを表示') //記事編集画面の「プレビュー」のテキスト
    );
    $args = array(
        'labels' => $labels, //この投稿タイプのラベルの配列
        'public' => true, //publicly_queriable, show_ui, show_in_nav_menus, exclude_from_searchのデフォルト値を定義するメタ引数
        'publicly_queryable' => true, //フロントエンドで post_type クエリが実行可能かどうか
        'show_ui' => true, //この投稿タイプを管理するデフォルト UI を生成するかどうか
        'exclude_from_search' => false, //この投稿タイプを検索結果から除外するかどうか
        'capability_type' => 'post', //投稿タイプの閲覧/編集/削除権限をチェックするのに使用。初期値: "post"
        'rewrite' => true, //このフォーマットでパーマリンクをリライトする
        'hierarchical' => false, //この投稿タイプが階層(親の指定が許可されている)かどうか
        'menu_position' => 5, //投稿タイプが表示される管理画面のメニューの位置
        'supports' => array('title','editor','thumbnail', 'excerpt','comments','trackbacks') //add_post_type_support()を直接呼び出すエイリアス
    );
    register_post_type('comic',$args); //カスタム投稿タイプとその動作を定義(single.phpに追加する名前)



    $labels = array(
        'name' => 'お絵かきまとめ', //投稿タイプの一般名
        'add_new_item' => '新規お絵かきまとめを追加',
        'not_found' =>  __('お絵かきまとめは見つかりませんでした'), //投稿がない場合の管理画面のカスタム投稿タイプ一覧に表示されるテキスト
        'new_item' => __('新しいお絵かきまとめ'), //編集画面のタイトル
        'view_item' => __('お絵かきまとめを表示') //記事編集画面の「プレビュー」のテキスト
    );
    $args = array(
        'labels' => $labels, //この投稿タイプのラベルの配列
        'public' => true, //publicly_queriable, show_ui, show_in_nav_menus, exclude_from_searchのデフォルト値を定義するメタ引数
        'publicly_queryable' => true, //フロントエンドで post_type クエリが実行可能かどうか
        'show_ui' => true, //この投稿タイプを管理するデフォルト UI を生成するかどうか
        'exclude_from_search' => false, //この投稿タイプを検索結果から除外するかどうか
        'capability_type' => 'post', //投稿タイプの閲覧/編集/削除権限をチェックするのに使用。初期値: "post"
        'rewrite' => true, //このフォーマットでパーマリンクをリライトする
        'hierarchical' => false, //この投稿タイプが階層(親の指定が許可されている)かどうか
        'menu_position' => 5, //投稿タイプが表示される管理画面のメニューの位置
        'supports' => array('title','editor','thumbnail', 'excerpt','comments','trackbacks') //add_post_type_support()を直接呼び出すエイリアス
    );
    register_post_type('oekaki',$args); //カスタム投稿タイプとその動作を定義(single.phpに追加する名前)


}
?>


'title'=記事タイトル ※必須(デフォルト)
'editor'=本文投稿部分 ※必須(デフォルト)
'thumbnail'=サムネイル(アイキャッチ画像を使用したい時)
'excerpt'=抜粋(本文の抜粋を利用できます)
'comments'=コメントフォーム(入れないとコメントフォームが出てきません)
'trackbacks'=トラックバック(同じく)
を選びました。(後で変えたりするかも)


設定した後は「パーマリンクの設定」を空更新

この functions.php をテーマフォルダに保存したら、管理画面の「設定」→「パーマリンクの設定」を空更新します。

※この空更新をしないと「ページがありません」のようになって、functions.php が認識されないそうです。


ダッシュボードに「メニュー」として追加される

自作テーマでは「イラスト」「comic」「お絵かきまとめ」のカスタム投稿を作成してみました。
こんな感じになります。
   ↓


カスタムでつけた名前とテンプレートファイルとの関連性

25行目 の ' ' の欧文表記名ですが、
普通は、自動的に single.php のテンプレートを使ってくれるのだそうですが、
25行目でつけた名前を single.php のファイル名に追加すると、
(「イラスト」なら、single-illust.php、「SS」なら single-ss.php、などのように) そのテンプレートを優先して使ってくれるのだそうです。
(つまり、カスタム投稿ごとに個別のレイアウトにする事ができます)


これは、すごい便利ですね!


013新しく好きな大きさのサムネイルを生成させる

wordpressでは、画像をアップすると、「サムネイル」「中サイズ」「フルサイズ」と、画像を 3つに分けて保存してくれます。


一番小さい「サムネイル」画像は、新着リストなどに使ったりして便利なんですが、いろいろカスタマイズしているうちに、もっと違うサイズのサムネイル画像もあったらいいのになあ・・・(例えば横長の長方形に切り取った画像とか)なんて思ったりします。


新しく任意のサイズの「サムネイル」を生成するには

functions.php に下記を追加します。
  ↓

<?php
//新しいサイズ(230x100)のサムネールを生成する
//add_image_size( $name, $width, $height, $crop );
add_image_size( 'post_230x100_thumbnail', 230, 100, true );
?>

メインサイトのトップページに新着記事のリストを載せたい、と思ったんですが、いつもの小さい正方形だと面白くないかな?と思って、230×100ピクセルの画像に切り取ってくれるよう追加してみました。


新しく出力された「サムネイル」

まだ作りかけで微調整が必要ですが、こんな感じに切り取ってくれましたよ。
  ↓


新しく「サムネイル」が作られるのは、設定以降に新規にアップした画像だけ

ただし、このサムネイル生成追加の記述は、これからアップする画像にのみ有効で、過去にアップ済みの画像の分までは生成してくれないようです。

過去の画像も有効にするには、新しく画像をアップし直すか、数が多すぎてそれが困難な場合は、下記のプラグインを入れるとよい、との事です。
  ↓
プラグイン「Regenerate Thumbnails


プラグイン「Regenerate Thumbnails」の設定

プラグインの新規追加から regenerate thumbnails で検索、インストールして有効化、
有効化すると、サイドバーのツールに Regen. Thumbnails と表示されるようになるのでクリック、

Regenerate Thumbnails の管理画面に遷移すると、Regenerate All Thumbnailsと 表示されたボタンがあるので、クリックするとサムネイル画像の再生成が始まります。

これで、functions.php に追加した新しいサイズのサムネイル画像が再生成されます。
  ↑
■参考サイト
WordPressで任意のサムネイル画像サイズを追加・サムネイルを再生成する方法


009「カスタムメニュー」を作る

公式テーマなどでは、すでにそう出来るよう設定済みだったりするかと思いますが、一からオリジナルのテーマを自作する場合は、自分で設定をしないといけないので、備忘録として書いておきます。


この実験ブログのテーマは、上部にメニューを並べる形のシンプルなデザインにしています。
カスタムメニュー」は、ダッシュボード → 外観 → メニューから設定しますが、
デフォルトテーマの「twentyシリーズ」を選んでいる時にはその項目があるのですが、自分でいちから「オリジナルテーマ」を作っている場合は、その「メニュー」という項目がありません。


「オリジナルテーマ」で「カスタムメニュー」を作れるようにする

functions.php に、下記のコードを記入して保存すれば、メニュー → 外観 → メニュー が現れます。
(記入する位置は、functions.php の中の一番下でOKです)

<?php
//カスタムメニューをつくれるようにする
 add_theme_support( 'menus' ); ?>


できた!(・∀・)
あとは、ダッシュボード → 外観 → メニューから好きなようにメニューを編集できます。


008管理画面からヘッダー画像をアップロードできるようにする。「カスタムヘッダー」

公式テーマなどでは、すでにそう出来るよう設定済みだったりするかと思いますが、一からオリジナルのテーマを自作する場合は、自分で設定をしないといけないので、備忘録として書いておきます。


管理画面からヘッダー画像をアップロードできるようにする。「カスタムヘッダー」

functions.phpに下記を追加します。

<?php
//管理画面からヘッダー画像をアップロードできるようにする。「カスタムヘッダー」
// デフォルトのロゴまでのURL
define('HEADER_IMAGE', get_bloginfo('stylesheet_directory').'/images/bg_top.jpg');
// 画像の幅と高さ
define('HEADER_IMAGE_WIDTH', 1000);
define('HEADER_IMAGE_HEIGHT',120);
// ヘッダーの文字色
define('HEADER_TEXTCOLOR', 'ffff33');
// カスタムヘッダーを有効にするための記述
add_custom_image_header('', 'my_admin_header_style');
// 管理画面用のスタイルの設定。多くの場合以下のままでいい。
function my_admin_header_style() {
?>
<style type="text/css">
/* Shows the same border as on front end */
#headimg {
	border: none;
	max-width: 1000px;
	height: auto;
	width /***/:auto;
}
</style>
<?php
}
?>


上記を入れると、ダッシュボードのメニューの外観 →「ヘッダー」から画像をアップできるようになります。


アップローした「ヘッダー画像」を出力する

カスタムヘッダーを表示させるには、表示したいphpファイルに以下を記述します。
(たいていは header.php に入れる場合がほとんどかと思います)

3行目です)
 ↓

	<!--カスタムヘッダー画像の呼び出し-->
	<h2>
		<img src="<?php header_image(); ?>"><br />
		<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo( 'name' ); ?></a></h1>
		<p><?php bloginfo('description'); ?></p>
	</h2>


005_2ダッシュボードでビジュアルエディタを強制的に消す方法

functions.phpに、投稿・固定ページの両方、ビジュアルエディタを非表示にするコードを記述する

function disable_visual_editor_in_page(){
  add_filter('user_can_richedit', 'disable_visual_editor_filter');
}
function disable_visual_editor_filter(){
  return false;
}
add_action( 'load-post.php', 'disable_visual_editor_in_page' );
add_action( 'load-post-new.php', 'disable_visual_editor_in_page' );


functions.phpに、固定ページのみ、ビジュアルエディタを非表示にするコードを記述する

function disable_visual_editor_in_page(){
  global $typenow;
  if( $typenow == 'page' ){
    add_filter('user_can_richedit', 'disable_visual_editor_filter');
  }
}
function disable_visual_editor_filter(){
  return false;
}
add_action( 'load-post.php', 'disable_visual_editor_in_page' );
add_action( 'load-post-new.php', 'disable_visual_editor_in_page' );


functions.phpに、カスタム投稿のみ、ビジュアルエディタを非表示にするコードを記述する

function disable_visual_editor_in_page(){
  global $typenow;
  if( $typenow == 'ポストタイプ' ){
    add_filter('user_can_richedit', 'disable_visual_editor_filter');
  }
}
function disable_visual_editor_filter(){
  return false;
}
add_action( 'load-post.php', 'disable_visual_editor_in_page' );
add_action( 'load-post-new.php', 'disable_visual_editor_in_page' );


または、下記コードだけでもいいようです。

functions.phpに、全てのユーザがビジュアルエディタを利用できなくなる記述

add_filter( 'user_can_richedit' , '__return_false' );


004_2 wp_is_mobile タグを使うか否か

レスポンシブ対応に関する覚書き


wordpress には、あらかじめ用意されている wp_is_mobile() というタグがあります。
これは「モバイル(スマホ・タブレット)から閲覧されているかどうか」という判定をします。

しかし、wordpressのwp_is_mobile() タグは、

mobile=スマートフォン&タブレット
PC=パソコン という判定をします。

これはちょっと違うんじゃないか? というか・・・

mobile=スマートフォン
それ以外は=タブレットとPC(widthでPCとタブレットを切り替える) 
としたいう方がいいのでは という意見があります。


各メディアの画面サイズ

PC (横幅:960px)
iPhone 4 / 4S (縦:640×960 横:960×640)
iPad (縦:768×1024px 横:1024×768px)


ということで、wp_is_mobile() タグは使わずに、新たに独自タグを設定する、という方法があります。


新しく is_mobile タグを作る(functions.php)

<?php
//スマホ表示分岐(is_mobileを有効にする)
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        'dream', // Pre 1.5 Android
        'CUPCAKE', // 1.5+ Android
        'blackberry9500', // Storm
        'blackberry9530', // Storm
        'blackberry9520', // Storm v2
        'blackberry9550', // Storm v2
        'blackberry9800', // Torch
        'webOS', // Palm Pre Experimental
        'incognito', // Other iPhone browser
        'webmate' // Other iPhone browser
 
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
?>

functions.php に上記タグを追記すると、is_mobile タグを使うことができるようになります。
タブレットはこの中に入っていないので、PCと同じ扱いになります。


条件分岐

<?php if ( is_mobile() ) : ?>
	// スマホで表示させたい内容
<?php else: ?>
	// PCで表示させたい内容
<?php endif; ?>